UserCSS で使える変数

#UserCSS

Scrapbox の app.css から、UserCSS で使える変数を抽出してみた。

スクリプト

#zx🐚

code: js

#!/bin/env zx

const style = await fs.readFile('app.css', 'utf-8');

const variables = [...new Set([...style.match(/--\w\-+/g)])].sort();

variables.forEach((variable) => console.log(variable));

web browser

code:js

const style = await (await fetch("/assets/css/app.css")).text();

const variables = [...new Set([...style.match(/--\w\-+/g)])].sort();

alert(variables.join("\n"));

抽出結果

下の方の情報は2021/8/22時点の古いもので現在と異なる箇所があるため2024/5/5時点の抽出結果に更新します

table:2024-05-05

--2hop-search-bg

--body-bg

--body-headings-color

--button-active-color

--button-hover-color

--card-active-bg

--card-backside

--card-bg

--card-box-hover-shadow

--card-box-shadow

--card-box-shadow-color

--card-description-code-color

--card-description-color

--card-description-link-color

--card-hover-bg

--card-title-bg

--card-title-bg-pinned

--card-title-color

--code-bg

--code-color

--cursor-color

--empty-page-link-color

--empty-page-link-hover-color

--expandable-menu-bg

--line-permalink-color

--line-title-color

--logo-url

--navbar-bg

--navbar-border-color

--navbar-icon-active-color

--navbar-icon-border-color

--navbar-icon-color

--navbar-icon-hovered-color

--navbar-link-color

--navbar-title-color

--new-button-active-bg

--new-button-bg

--new-button-horizontal-color

--new-button-hover-bg

--new-button-vertical-color

--page-bg

--page-image-loading-border-color

--page-link-color

--page-link-color-cursor-line

--page-link-hover-color

--page-text-color

--quote-bg-color

--relation-label-bg

--relation-label-empty-bg

--relation-label-empty-text

--relation-label-links-bg

--relation-label-links-text

--relation-label-text

--search-form-bg

--search-form-icon-color

--search-form-icon-focus-color

--search-form-text-color

--telomere-border

--telomere-unread

--telomere-updated

--tool-badge-bg

--tool-bg

--tool-color

--tool-light-color

--tool-text-color

↓2021/8/22